<script lang="ts" setup>
import { computed } from 'vue';

const props = defineProps<{
  logs: string[]
}>()

const toHtml = (s: string) => {
  return s
    .replaceAll(/\d+\]\-\[(\w+)\]/gm, (v, ...args) => {
      const $1 = args[0]
      return v.replace($1, `<b class="${$1.toLowerCase()}">[${$1}]</b>`)
    })
    .replace(/\n/g, '<br>')
}

const cls = 'com-test-exec-log'
</script>

<template>
  <div :class="cls">
    <div v-for="(_, i) in logs" :key="i" :class="`${cls}_item`" v-html="toHtml(_)"></div>
  </div>
</template>

<style lang="scss">
.com-test-exec-log {
  font-size: 14px;
  &_item {
    margin-bottom: 1em;
  }
  .info {
    color: var(--el-color-success);
  }
  .error {
    color: var(--el-color-danger);
  }
  .warning {
    color: var(--el-color-warning);
  }
}
</style>
